Background Styles in CSS
The background property is a shorthand property for:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.
Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high. Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
Property Values
| Value | Description |
|---|---|
| background-color | Specifies the background color to be used |
| background-image | Specifies ONE or MORE background images to be used |
| background-position | Specifies the position of the background images |
| background-size | Specifies the size of the background images |
| background-repeat | Specifies how to repeat the background images |
| background-origin | Specifies the positioning area of the background images |
| background-clip | Specifies the painting area of the background images |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page |
| initial | Sets this property to its default value. |
| inherit | nherits this property from its parent element. |
The example below shows a background of the body with the color purple.
The example below shows a background image that repeats.
The example below shows a background with a video clip.
Mix and match different background images to create a hero image.